<template>
  <div>
    <div class="head">
      <el-input v-model="keyWords" placeholder="请输入菜单名称" />
      <el-button type="primary" @click="onsell" icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        type="primary"
        @click="addMenu"
        icon="el-icon-circle-plus-outline"
        >新增</el-button
      >
    </div>
    <el-table
      :data="menuListMain"
      style="width: 100%"
      max-height="560"
      row-key="id"
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="id" label="id" width="100" />
      <el-table-column prop="label" label="菜单名称" width="180" />
      <el-table-column prop="type" label="菜单类型" width="180" />
      <el-table-column
        prop="typeName"
        label="菜单类型名称"
        width="180"
        hidden="true"
      />
      <el-table-column prop="icon" label="菜单图标" width="180" />
      <el-table-column prop="code" label="菜单代码" width="180" />
      <el-table-column prop="parentId" label="菜单上级id" width="180" />
      <el-table-column prop="parentName" label="菜单上级名称" width="180" />
      <el-table-column prop="name" label="路由名称" width="180" />
      <el-table-column prop="path" label="路由地址" width="180" />
      <el-table-column prop="url" label="授权路径" width="180" />
      <el-table-column prop="remark" label="备注" width="180" />
      <el-table-column label="操作" width="210" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" -->
          <div class="btn">
            <el-button
              size="mini"
              @click="jumpEditMenuPage(scope.$index, scope.row)"
              >编辑</el-button
            >

            <el-button
              size="mini"
              type="danger"
              @click="deleteMenuRoles(scope.$index, scope.row)"
              >删除</el-button
            >

            <el-button
              size="mini"
              type="danger"
              @click="jumpSqPage(scope.$index, scope.row)"
              >授权</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增菜单" :visible.sync="addMenuIsShow">
      <el-form :model="addMenuFormIn">
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="addMenuFormIn.label" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-select v-model="addMenuFormIn.type" placeholder="请选择" clearable = true>
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单图标" :label-width="formLabelWidth">
          <el-input v-model="addMenuFormIn.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="菜单代码(菜单访问路径)" :label-width="formLabelWidth">
          <el-input v-model="addMenuFormIn.code" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="上级菜单名称" :label-width="formLabelWidth">
          <el-select
            v-model="addMenuFormIn.value1"
            @change="selectchange(addMenuFormIn.value1)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="addMenuFormIn.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addMenuIsShow = false">取 消</el-button>
        <el-button type="primary" @click="addMenuReal()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑菜单" :visible.sync="editMenuIsShow">
      <el-form :model="editMenuFormIn">
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input
            v-model="editMenuFormIn.label"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-select v-model="editMenuFormIn.type" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth">
          <el-input v-model="editMenuFormIn.icon" autocomplete="off"></el-input>
        </el-form-item>

       <!-- <el-form-item label="菜单代码(菜单访问路径)" :label-width="formLabelWidth" :clearable = "clearable">
          <el-input v-model="editMenuFormIn.code" autocomplete="off" disabled = true></el-input>
        </el-form-item>


        <el-form-item label="路由名称" :label-width="formLabelWidth">
          <el-input v-model="editMenuFormIn.name" autocomplete="off" disabled = true></el-input>
        </el-form-item>
        <el-form-item label="路由地址" :label-width="formLabelWidth">
          <el-input v-model="editMenuFormIn.path" autocomplete="off" disabled = true></el-input>
        </el-form-item>
        <el-form-item label="授权路径" :label-width="formLabelWidth">
          <el-input v-model="editMenuFormIn.url" autocomplete="off" disabled = true></el-input>
        </el-form-item>-->


        <el-form-item label="上级菜单名称" :label-width="formLabelWidth">
          <el-select
            v-model="editMenuFormIn.value2"
            @change="editselectchange(editMenuFormIn.value2)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="editMenuFormIn.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editMenuIsShow = false">取 消</el-button>
        <el-button type="primary" @click="editMenuReal()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="菜单授权" :visible.sync="roleMenuEditIsShow">
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入"
        v-model="cdsq"
        @change="yd()"
        :data="roleMenuEditRoles"
      >
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleMenuEditIsShow = false">取 消</el-button>
        <el-button type="primary" @click="roleMenuEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLoginMenuInfoVo,
  addMenu,
  selectMenuXlk,
  selectAllMenus,
  selectMenuTypeXlk,
  editMenu,
  selectRolesByMeunId,
  selectWSQRolesByMeunId,
  deleteMenuRoles,
  roleMenuEdit
} from '@/api/menuList'

export default {
  name: 'menuList',

  data () {
    return {
      keyWords: '',
      menuListMain: [],
      addMenuFormIn: {
        label: '',
        type: '',
        name: '',
        path: '',
        url: ''
      },
      editMenuFormIn: {
        label: '',
        type: '',
        name: '',
        path: '',
        icon: '',
        remark: '',
        url: ''
      },
      addMenuIsShow: false,
      editMenuIsShow: false,
      formLabelWidth: '120px',
      clearable: true,
      options: [],
      options1: [],
      options2: [],
      options3: [],
      parentId: '',
      parentName: '',
      roleMenuEditIsShow: false,

      roleMenuid: '',
      roleMenuEditRoles: [],
      cdsq: [],
      filterMethod (query, item) {
        return item.label.indexOf(query) > -1
      }
    }
  },

  created () {
    this.selectAllMenus()
  },
  mounted () {
    this.selectAllMenus()
  },
  methods: {
    async roleMenuEdit () {
      const params = {
        id: this.roleMenuid,
        roles: this.cdsq
      }
      console.log('授权处理，入参信息为：', params)
      const res = await roleMenuEdit(params)
      console.log('授权处理成功，返回信息为：', res)
      this.roleMenuEditIsShow = false
    },
    yd () {
      console.log('左右移动', this.cdsq)
    },
    async jumpSqPage (index, row) {
      this.roleMenuEditIsShow = true
      const params = {
        id: row.id
      }
      this.roleMenuid = row.id
      const res = await selectWSQRolesByMeunId(params)
      console.log('调用未授权的菜单，返回信息为res.data:', res.data)
      const res1 = await selectRolesByMeunId(params)
      this.roleMenuEditRoles = [...res1.data, ...res.data]

      this.cdsq = res1.data.map(i => i.key)
      console.log('调用已授权的菜单，返回信息为this.cdsq:', this.cdsq)
    },

    async jumpEditMenuPage (index, row) {
      this.editMenuIsShow = true
      this.editMenuFormIn.id = row.id
      this.editMenuFormIn.label = row.label
      this.editMenuFormIn.type = row.type
      this.editMenuFormIn.name = row.name
      this.editMenuFormIn.path = row.path
      this.editMenuFormIn.url = row.url
      this.editMenuFormIn.icon = row.icon
      this.editMenuFormIn.code = row.code
      this.editMenuFormIn.remark = row.remark

      const res = await selectMenuXlk()
      this.options2 = res.data
      const res1 = await selectMenuTypeXlk()
      this.options3 = res1.data

      const menuselect = {
        label: row.parentName,
        value: row.parentId
      }
      this.editMenuFormIn.value2 = menuselect

      console.log('_____________________row,', row)
      console.log('_____________________value2,', this.editMenuFormIn.value2)

      this.editMenuFormIn.type = row.type
    },

    async editMenuReal () {
      this.editMenuIsShow = false
      const params = { ...this.editMenuFormIn }
      params.parentId = this.editMenuFormIn.value2.value
      params.parentName = this.editMenuFormIn.value2.label

      console.log('编辑菜单，请求参数是___________', params)
      const res = await editMenu(params)
      console.log('编辑菜单，返回的内容为___________', res)

      this.selectAllMenus()
    },

    editselectchange (item) {
      console.log('编辑时item,', item)
      this.parentId = item.value
      this.parentName = item.label
    },
    async deleteMenuRoles (index, row) {
      console.log('index___________删除页面，index:', index)
      console.log('row___________删除页面，row:', row)
            console.log("删除的数据是_________index,", index);

      const params = {
        id:row.id,
      }
      await deleteMenuRoles(params);
      this.onsell();
    },

    async onsell () {
      console.log('搜索，搜索内容为___________', this.keyWords)
      this.selectAllMenus()
    },
    async addMenu () {
      this.addMenuFormIn = [];
      this.addMenuIsShow = true
      const res = await selectMenuXlk()
      this.options = res.data
      const res1 = await selectMenuTypeXlk()
      this.options1 = res1.data
    },

    async addMenuReal () {
      this.addMenuIsShow = false
      const params = { ...this.addMenuFormIn }
      params.parentId = this.parentId
      params.parentName = this.parentName

      console.log('this.options1：', this.options1)
      console.log('this.options', this.options)
      console.log('新增菜单，调用新增菜单的接口，请求参数是___________', params)
      const res = await addMenu(params)
      console.log('新增菜单，返回的内容为___________', res)

      this.selectAllMenus()
    },

    async selectAllMenus () {
      //const res = await getLoginMenuInfoVo();
      const params = {}
      const res = await selectAllMenus(params)
      console.log('查询全部菜单信息，信息是::::', res.data)
      this.menuListMain = res.data
    },

    selectchange (item) {
      this.parentId = item.value
      this.parentName = item.label
      console.log('___________parentId', this.parentId)
      console.log('___________parentName', this.parentName)
    }
  }
}
</script>

<style scoped>
.head {
  display: flex;
  align-items: center;
  height: 50px;
  padding-left: 20px;
}
.head > div {
  width: 180px;
  margin-right: 20px;
}
.btn {
  display: flex;
}
</style>
